<template>
  <header
    class="border-b transition-all duration-200"
    style="background-color: var(--bg-secondary); border-color: var(--border-primary)"
  >
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between items-center h-16">
        <!-- Logo和标题 -->
        <div class="flex items-center space-x-3">
          <div
            class="w-8 h-8 rounded-lg flex items-center justify-center transition-transform duration-200 hover:scale-105"
            style="background: linear-gradient(135deg, var(--primary-500), var(--accent-500))"
          >
            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"
              />
            </svg>
          </div>
          <div>
            <h1
              class="text-xl font-bold transition-colors duration-200"
              style="color: var(--text-primary)"
            >
              MCP JSON2TOML
            </h1>
            <p class="text-xs transition-colors duration-200" style="color: var(--text-tertiary)">
              JSON到TOML转换工具
            </p>
          </div>
        </div>

        <!-- 主题切换和其他操作 -->
        <div class="flex items-center space-x-4">
          <!-- 主题切换按钮 -->
          <button @click="toggleTheme" class="theme-toggle" :aria-label="getThemeTitle()">
            <!-- 系统主题图标 -->
            <svg
              v-if="themeMode === 'system'"
              class="w-5 h-5 transition-all duration-300"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
              />
            </svg>
            <!-- 浅色主题图标 -->
            <svg
              v-else-if="themeMode === 'light'"
              class="w-5 h-5 transition-all duration-300"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
              />
            </svg>
            <!-- 深色主题图标 -->
            <svg
              v-else
              class="w-5 h-5 transition-all duration-300"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
              />
            </svg>
          </button>

          <!-- GitHub链接 -->
          <a
            href="https://gitee.com/xiaohanyes/mcp-json2toml"
            target="_blank"
            rel="noopener noreferrer"
            class="p-2 rounded-lg transition-all duration-200 hover:scale-105"
            style="
              color: var(--text-tertiary);
              background-color: var(--bg-primary);
              border: 1px solid var(--border-primary);
            "
            title="查看源代码"
            aria-label="查看源代码"
          >
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
              <path
                d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
              />
            </svg>
          </a>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
import { useTheme } from '@/composables/useTheme'

const { themeMode, toggleTheme } = useTheme()

// 获取主题按钮标题
function getThemeTitle() {
  switch (themeMode.value) {
    case 'system':
      return '跟随系统主题 (点击切换到浅色)'
    case 'light':
      return '浅色主题 (点击切换到深色)'
    case 'dark':
      return '深色主题 (点击切换到跟随系统)'
    default:
      return '切换主题'
  }
}
</script>

<style scoped>
/* 组件特定样式已在 main.css 中定义 */
</style>
